<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"//>	
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style type="text/css">
			.mui-pull-left{
    			color: #FFFFFF;	
	    		line-height:44px ;
	    	}
	    	.mui-pull-right{
	    		color: #FFFFFF;	
	    		line-height:44px ;
	    		
	    	}
	    	.mui-title{
	    		color: #FFFFFF;
	    	}
	    	.mui-icon.iconfont{
	    		font-size: 18px;
	    	}
	    	nav .mui-icon{
	    		left:50%;
	    		margin-left: -12px;
	    	}
	    	.mui-bar.mui-bar-nav{
	    		background: #0072dc;
	    	}
	    	
	    	.mui-control-item.text_submain{
	    		line-height: 32px;
	    	}
	    	.topic_content img{
	    		width: auto !important;
	    		height: auto !important;
	    		max-width: 100%;
	    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i> 
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>		
			<h1 class="mui-title" id="title">{{userName}}</h1>
		</header>
		<div class="mui-content">
		    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#myLikes">
						我的赞
					</a>
					<a class="mui-control-item mui-active" href="#myCollects">
						我的收藏
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" style="transform: translate3d(180px, 0px, 0px) translateZ(0px);"></div>
				<div class="mui-slider-group" style="height: 600px;">
					<div id="myLikes" class="mui-slider-item mui-control-content">
						<div id='wrapperMyLikes' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollMyLikes' style="min-height: 300px;" class="mui-scroll">
								<ul class="mui-table-view app-hide">
									<li @tap='goAnswer(like.ID)' v-for="answer in myLikes" class="mui-table-view-cell">
										<div class="card-topic_header">
											<p>
												<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
												<span class="text_main card_username">{{answer.UserName}}</span>
												<span class="text_main">{{answer.Date}}</span>						
											</p>
										</div>
										<div class="card-topic_content" style="margin-top:2px;border-bottom: #E7E7E7;">
											<div class="comment_content">
												<p class="comment_content_attr text_submain">
													<span>{{{answer.Content}}}</span>
												</p>
											</div>
										</div>			
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="myCollects" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperMyCollects' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollMyCollects' style="min-height: 300px;" class="mui-scroll">
								<ul class="mui-table-view app-hide">
									<li @tap='goQuestion(question.ID, question.CircleName)' v-for="question in myCollects" class="mui-table-view-cell">
										<div class="card-topic_header">
											<i class="mui-pull-left mui-icon iconfont i_label_little"  style="color: #666666;line-height: 25px;margin-right: 5px;"><img :src="question.Avatar" alt="" style="border-radius: 50%;width: 20px;height: auto;"></i>
											<p><span class="text_main card_username">{{question.Name}}</span>
												<span class="text_main">发表了话题</span>
											</p>					
										</div>
										<div class="card-topic_content" style="margin-top:2px;">
											<div class="card-topic-title">
											<p class="topic_title text_main">{{question.Title}}</p>
											</div>
											<div class="topic_content">						
												<p class="card_content_attr text_submain">
													<span>{{{question.Content}}}</span>
												</p>
												<p class="text_note card_note-fr">
													<i class="iconfont text_main">&#xe63e;</i>
													<span class="">{{question.Commentsnum}}</span>
												</p>
											</div>
										</div>				
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
				var vm=new Vue({
					el:'#app',
					data: {
						userName:'',
						myLikes:[],
						myCollects:[],
						scrollMyLike:{},
						scrollMyCollect:{},
						paramObj:{
							PageSize:6,
							CurPageMyLike:1,
							CurPageMyCollect:1,
						}
					},
					computed:{
					},
					ready:function () {
						var me = this;
						$('#app .app-hide').show();
						mui.init();
//						ui.fixScroll(0);
						me.scrollMyLike=ui.setPullToRefresh('#wrapperMyLikes','#scrollMyLikes',this.getMyLikes);
						me.scrollMyCollect=ui.setPullToRefresh('#wrapperMyCollects','#scrollMyCollects',this.getMyCollects);
						mui.plusReady(function () {
								me.getUserInfo();
								me.getMyLikes(true);
								me.getMyCollects(true);
						});
						document.addEventListener('reloadMyLikes',function () {
							me.getMyLikes(true);
						},false);
						document.addEventListener('reloadMyCollects',function () {
							me.getMyCollects(true);
						},false);
					},
					methods:{
						getUserInfo:function(){
							this.userName = persistent.uinfo().Username;
							var current = plus.webview.currentWebview();
							showPage(current);
						},
						goAnswer: function(aid){
							var current = plus.webview.currentWebview();
							openPage('answer.html','answer',{aid:aid});
						},
						goQuestion:function(qid,circleName){
							if(!qid){
								alert('qid 为空，无法跳转！');
								return;
							}
							openPage('../circle/question.html','question',{qid:qid,circleName:circleName})
						},
						getMyLikes: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageMyLike = isRefresh?1:me.paramObj.CurPageMyLike+1;
							ajax.post(api.user.getMyLikes,{
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageMyLike,
							},function (data) {
								me.myLikes = isRefresh?data.Data:me.myLikes.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollMyLike.puller, isRefresh, nomore);
							});
						},
						getMyCollects: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageMyCollect = isRefresh?1:me.paramObj.CurPageMyCollect+1;
							ajax.post(api.user.getMyCollects,{
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageMyCollect,
							},function (data) {
								me.myCollects = isRefresh?data.Data:me.myCollects.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollMyCollect.puller, isRefresh, nomore);
							});
						},
					}
				})
		</script>	
	</body>

</html>